<template>
	<view class="search-result-container" :style="'padding-top:' + header.allHeight + 'px'">
		<!-- 头部搜索与返回 -->
		<view class="search-header" :style="'height:' +  header.height + 'px;' + 'padding-top:' + header.top + 'px;padding-bottom:12rpx'">
			<view class="go-back" :style="'top:' + header.top + 'px'">
				<uni-icons @click="goBack" color="#474A58" type="back" size="26"></uni-icons>
			</view>
			<view class="search-input-wreapper" :style="'top:' + header.top + 'px'">
				<input confirm-type="search" @confirm="search(keyWord)" v-model.trim="keyWord" placeholder-style="color:#A3A3A3;font-size:28upx;"
				 placeholder-class="search-placehoder" placeholder="请输入您要查询的内容" type="text">
			</view>
		</view>
		<!-- 过滤类型   默认-->
		<view class="search-by-type-container">
			<block v-for="(item,index) in typeOptions" :key='index'>
				<text @click="filterByTpe(index)" :class="typeIndex === index ? 'active' : ''">{{item}}</text>
			</block>
		</view>
		<!-- 过滤按钮 -->
		<!-- <view class="search-btn-groups">
			<block v-for="(item,index) in btnGroups" :key='index'>
				<text style="margin-top: 20upx;" @click="filterByBtn(index)" :class="index === btnGroupsIndex ? 'active' : ''">{{item.name}}</text>
			</block>
		</view> -->
		
		<view class="search-btn-groups" v-if="localType == 3">
			<block v-for="(item,index) in pcategoryList" :key='index'>
				<text style="margin-top: 20upx;" @click="filterByBtn(index)" :class="index === btnGroupsIndex ? 'active' : ''">{{item.name}}</text>
			</block>
		</view>
		
		
		<view class="search-btn-groups" v-if="localType == 2">
			<block v-for="(item,index) in twoList" :key='index'>
				<text style="margin-top: 20upx;" @click="filterByBtn(index)" :class="index === btnGroupsIndex ? 'active' : ''">{{item}}</text>
			</block>
		</view>
		
		
		
		
		<view class="result-list" v-if="productList.length != 0">
			<ProductItemTypeOne :dataList="productList"></ProductItemTypeOne>
			<!-- <view class="to-more">查看更多</view> -->
		</view>
		<view class="result-list" v-else>
			<view class="to-more">暂无数据</view>
		</view>
		<view class="top" :style="{'display':(flag===true? 'block':'none')}">
			<view class="iconfont icon-top topc" @click="top"></view>
		</view>
	</view>
</template>
<script>
	import uniIcons from "../components/uni-icons/uni-icons.vue";
	import ProductItemTypeOne from '../components/product-item-type-stree/product-item-type-stree.vue';
	export default {
		components: {
			uniIcons,
			ProductItemTypeOne
		},
		data() {
			return {
				pacategoryId : 0,
				localType : 0,
				keyWord: '',
				header: {
					top: 0,
					height: 0,
					allHeight: 0
				},
				typeIndex: 0,
				typeOptions: ['默认', '最新发布', '销量最高'],
				btnGroupsIndex: 0,
				btnGroups: ['全部', '交友派对', '情侣约会', '下午茶'],
				twoList : ['单身活动','情侣约会','形象设计','情感顾问'],
				productList: [],
				flag: false,
				searchId : 0,
				pcategoryList : []
			}
		},
		created() {
			const header = uni.getMenuButtonBoundingClientRect();
			this.header.top = header.top;
			this.header.height = header.height;
			this.header.allHeight = header.top + header.height + 6;
			
			
		},
		methods: {
			getPcategory() {
				this.$request
					.get({
						url: 'pcategory/list',
						data: {
							// code: code
						}
					})
					.then(res => {
						if (res.status === 1) {
							const pcategoryList = res.data;
							this.pcategoryList = pcategoryList;
							for(var i = 0;i < this.pcategoryList.length;i++){
								if(this.pcategoryList[i].name == this.keyWord){
									this.btnGroupsIndex = i;
									this.pacategoryId = this.pcategoryList[i].id;
									console.log(this.pcategoryList[i])
									this.getListShai();
								}
							}
						}
					});
			},
			getListShai(){
				var jsonData = {};
				if(this.localType == 3 || this.localType == 2){
					jsonData = {
						pageNum : 1,
						pageSize : 25,
						pcategoryIDs : this.pacategoryId,
						// productName : this.keyWord
					}
				}else{
					jsonData =  {
						pageNum : 1,
						pageSize : 25,
						productName : this.keyWord
					}
				}
				this.$request
					.get({
						url: 'product/search',
						data:jsonData
					})
					.then(res => {
						if (res.status === 1) {
							const pcategoryList = res.data.products;
							this.productList = pcategoryList;
							this.btnGroups = pcategoryList;
						}
					});
			},
			search(e){
				console.log(e)
			},
			goBack() {
				uni.navigateBack()
			},
			filterByTpe(index) {
				this.typeIndex = index
			},
			filterByBtn(index) {
				this.btnGroupsIndex = index;
				if(this.localType == 3){
					this.pacategoryId = this.pcategoryList[index].id;
					this.keyWord = this.pcategoryList[index].name;
				}else if(this.localType == 2){
					this.pacategoryId = index + 1;
					this.keyWord = this.twoList[index];
				}
				
				this.getListShai();
			},
			top() { //回到顶部
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
				if (e.scrollTop > 600) { //当距离大于600时显示回到顶部按钮
					this.flag = true
				} else { //当距离小于600时隐藏回到顶部按钮
					this.flag = false
				}
			},

		},
		onLoad: function(option) {
			if(option.localType == 3){
				this.localType = option.localType
				this.keyWord = option.localName
				this.getPcategory();
			} else if (option.localType == 2){
				this.localType = option.localType
				for(var i = 0;i < this.twoList.length;i++){
					this.keyWord = this.twoList[option.type];
				}
				this.btnGroupsIndex = Number(option.type);
				this.pacategoryId = option.id
				this.getListShai();
			}else{
				this.btnGroupsIndex = Number(option.type);
				option.keyWord ? this.keyWord = option.keyWord : '';
				this.getListShai();
			}
			
			
			
		},
	}
</script>

<style scoped lang="less">
	.search-result-container {
		background-color: #fff;

		.search-header {
			display: flex;
			align-items: center;
			background-color: #fff;
			font-size: 30upx;
			padding-left: 22upx;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 99;
			width: 100%;
			box-sizing: content-box;

			.go-back {
				.city {
					color: #474A58;
				}

				margin-right: 10px;
			}

			.search-input-wreapper {
				width: 380upx;
				height: 64upx;
				background: rgba(243, 246, 248, 1);
				border-radius: 32upx;
				border: 2upx solid rgba(223, 225, 236, 1);
				color: #8389A0;
				padding-left: 32upx;
				display: flex;
				align-items: center;
				box-sizing: border-box;
			}
		}

		.search-by-type-container {
			padding: 30upx 32upx;
			width: 100%;
			display: flex;
			align-items: center;
			font-size: 26upx;
			color: #8389A0;

			text {
				margin-right: 80upx;
			}

			.active {
				color: #474A58;
				font-weight: 600;
			}
		}

		.search-btn-groups {
			display: flex;
			flex-wrap: wrap;
			padding: 0 32upx;
			font-size: 26upx;

			text {
				margin-right: 10upx;
				border-radius: 26upx;
				border: 2upx solid rgba(233, 235, 240, 1);
				color: #474A58;
				display: flex;
				align-items: center;
				padding: 8upx 20upx;
			}

			.active {
				color: #FF5998;
				border: 2upx solid rgba(255, 89, 152, 1);
			}
		}

		.result-list {
			margin-top: 30upx;
			padding: 0 38upx 0 32upx;

			.to-more {
				border-top: 2upx solid #EDEDED;
				color: #474A58;
				font-size: 30upx;
				text-align: center;
				line-height: 82upx;
			}
		}

		.top {
			position: relative;
			display: none;

			.topc {
				position: fixed;
				right: 20upx;
				background:rgba(0,0,0,0.4);
				color: #fff;
				top: 70%;
				width: 80upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				border-radius: 50%;
			}
		}

	}
</style>
